/*
 * @Author: XiaoFeng Chen 
 * @Date: 2018-11-07 11:37:27 
 * @Last Modified by: XiaoFeng Chen
 * @Last Modified time: 2018-11-07 14:08:09
 * 元素提示框
 */
import '../others/popover/arrow.scss'
import {triggerOnce} from '../../rxtools/src/brower/event'
export default {
    bind(el,binding){
        var div;
        el.addEventListener('mouseenter',function(){
            if(div){
                return;
            }
            var tips =binding.value;
            var rect=el.getBoundingClientRect();
            var html=`
                <div rx-placement=top" style="
                    position:fixed;
                    top:-1000px;
                ">
                    <div class="rx-arrow-content">
                    <div class="rx-arrow" style="left:10px;"></div>
                    <div style="border-radius: 4px;
                    background-color: rgba(0,0,0,.8);
                    box-shadow: 0 2px 12px 0 rgba(0,0,0,.15);
                    box-sizing: border-box;
                    padding: 10px 20px;
                    transform-origin: center top 0;
                    z-index: 100;
                    color: #fff;">${tips}</div>
                    </div>
                </div>
                `
            div=document.createElement('div');
            div.innerHTML=html;
            document.body.appendChild(div)

            var content=div.querySelector('[rx-placement]')
            var size =content.getBoundingClientRect();
            console.log(size)
            content.style.top=(rect.top-size.height)+'px';
            content.style.left=rect.left+'px';
            console.log(el,div)
            triggerOnce([el,div],()=>{
                div.remove();
                div=null;
            },'mousemove')
        })
        // el.addEventListener('mouseleave',function(){
        //     div.remove();
        // })
    }
};